<template>
	<div class="module">
		<div class="card-header">
			<p class="title">购物车</p>
			<p class="close" @click="clickAction('clear', data)">清空</p>
		</div>
		<div class="card-main">
			<div class="good-view" v-for="(item, index) in proData">
				<div class="goods-detail">
					<p class="title">{{item.name}}</p>
					<p class="unit">{{item.unit}}</p>
					<p class="price">￥{{item.price}}</p>
				</div>
				<div class="count-view">
					<span class="reduce" @click="clickAction('reduce', item, index)"><Icon type="android-remove"></Icon></span>
					<span class="count">{{item.number}}</span>
					<span class="add" @click="clickAction('add', item, index)"><Icon type="android-add"></Icon></span>
				</div>
			</div>
		</div>
		<div class="card-footer">
			<p class="count">共{{totalCount}}份，总计<span class="price">￥{{totalPrice}}</span></p>
			<Button type="primary" @click="clickSubmit" :disabled="disabled">下单</Button>
		</div>
	</div>
</template>

<script>
export default {
	props: ['data'],
	data() {
		return {
		}
	},
	computed: {
		proData() {
			let data = this.data;
			return data;
		},
		totalCount() {
			return this.data.length;
		},
		totalPrice() {
			let data = this.data;
			let totalPrice = 0;
			data.forEach((item) => {
				let price = parseFloat(item.price) * parseFloat(item.number);
				totalPrice += price;
			})
			return totalPrice;
		},
		disabled() {
			let data = this.data;
			if (data.length == 0) {
				return true;
			} else {
				return false;
			}
		}
	},
	methods: {
		clickAction(type, item, index) {
			this.$emit('on-click-action', type, item, index)
		},

		clickSubmit() {
			this.$emit('on-submit', this.data)
		}
	}
}
</script>

<style scoped lang="less">
.module {
	width: 4.5rem;
	color: #fff;
	.card-header {
		padding: 0 .3rem;
		height: .5rem;
		line-height: .5rem;
		background: rgba(255,255,255,0.3);
		p {
			color: #fff;
			font-size: .2rem;
		}
		.title {
			float: left;
		}
		.close {
			float: right;
			font-size: .14rem;
			color: #0CA0FF;
			cursor: pointer;
		}
	}
	.card-main {
		width: 4.5rem;
		padding: 0 .2rem;
		position: absolute;
		top: .8rem;
		bottom: .7rem;
		overflow: auto;
		.good-view {
			width: 100%;
			height: 1.1rem;
			border-bottom: 1px solid rgba(255,255,255,0.4);
			position: relative;
			.goods-detail {
				padding-top: .2rem;
				display: inline-block;
				.title {
					color: #fff;
				}
				.unit {
					color: rgba(255,255,255,0.6);
				}
				.price {
					font-size: .14rem;
					color: #CD2A86;
				}
			}
			.count-view {
				position: absolute;
				right: .2rem;
				top: .6rem;
				.reduce {
					border: 1px solid rgba(255,255,255,0.6);
					color: #fff;
					font-size: .2rem;
					display: inline-block;
					width: .4rem;
					height: .4rem;
					line-height: .4rem;
					text-align: center;
					border-radius: 100%;
					cursor: pointer;
				}
				.count {
					margin: 0 .2rem;
					color: rgba(255,255,255,0.6);
				}
				.add {
					border: 1px solid #BD317F;
					color: #fff;
					display: inline-block;
					width: .4rem;
					height: .4rem;
					line-height: .4rem;
					text-align: center;
					font-size: .2rem;
					border-radius: 100%;
					cursor: pointer;
					background: #BD317F;
				}
			}
		}
	}
	.card-footer {
		width: 4.5rem;
		padding: 0 .2rem;
		height: .7rem;
		position: absolute;
		bottom: 0;
		.count {
			color: #ffffff;
			display: inline-block;
		}
		.price {
			font-size: .24rem;
			color: #CD2A86;
		}
		button {
			float: right;
		}
	}
}
</style>